import { deleteGoods, getGoods } from "@/api/goods";
import { AppContext } from "@/providers";
import { getDateColumns } from "@/util";
import { Button, Table, TableColumnProps, TablePaginationConfig, Image, Popconfirm, message, Tag } from "antd";
import { useCallback, useContext, useEffect, useMemo, useState } from "react";
import { GoodsRecord, GoodsStatus } from "./GoodsListType";
import { history } from "@/util/history";
import { OPERATE_GOODS } from "@/route";
import qs from "qs";
import EllipsisText from "@/components/dataPresentation/EllipsisText";

const GoodsList = () => {
	const { REACT_APP_BASEURL } = useContext(AppContext);
	const columns = useMemo<TableColumnProps<GoodsRecord>[]>(
		() => [
			{ dataIndex: "name", width: 140, title: "商品名", render: (text) => <EllipsisText>{text}</EllipsisText> },
			{
				dataIndex: "cover",
				width: 100,
				title: "商品图",
				render: (cover) => cover && <Image src={`${REACT_APP_BASEURL}${cover}`} width={58} />,
			},
			{
				dataIndex: "description",
				width: 200,
				ellipsis: true,
				title: "商品描述",
				render: (text) => <EllipsisText>{text}</EllipsisText>,
			},
			{
				dataIndex: "status",
				width: 100,
				title: "状态",
				render: (status) => (status === GoodsStatus.Enabled ? <Tag color="success">已上架</Tag> : <Tag>已下架</Tag>),
			},
			...getDateColumns<TableColumnProps<GoodsRecord>[]>().map((item) => ({ ...item, width: 120 })),
			{
				width: 170,
				fixed: "right",
				render: (_, { _id }) => (
					<>
						<Button
							type="primary"
							onClick={() => history.push({ pathname: OPERATE_GOODS, search: `?${qs.stringify({ type: "edit", id: _id })}` })}
						>
							编辑
						</Button>
						<Button
							className="ml-2"
							onClick={() =>
								history.push({ pathname: OPERATE_GOODS, search: `?${qs.stringify({ type: "clone", id: _id })}` })
							}
						>
							克隆
						</Button>
						<Popconfirm
							title="确定删除吗？"
							onConfirm={async () => {
								await deleteGoods({ id: _id });
								await fetchGoods();
								message.success("已删除");
							}}
						>
							<Button className="ml-2" danger>
								删除
							</Button>
						</Popconfirm>
					</>
				),
			},
		],
		[]
	);
	const [pageOptions, setPageOptions] = useState<TablePaginationConfig>({ pageSize: 10, current: 1, total: 0 });
	const fetchGoods = useCallback(
		async (page = 1, pageSize = 10) => {
			const res = await getGoods({ page, pageSize });
			setDataSource(res.data?.data || []);
			setPageOptions({ ...pageOptions, total: Number(res.data?.total || 0) });
		},
		[pageOptions]
	);
	useEffect(() => {
		fetchGoods();
	}, []);
	const [dataSource, setDataSource] = useState<GoodsRecord[]>([]);
	return (
		<div>
			<Button
				className="mb-2"
				type="primary"
				onClick={() => history.push({ pathname: OPERATE_GOODS, search: `?${qs.stringify({ type: "add" })}` })}
			>
				添加商品
			</Button>
			<Table
				columns={columns}
				scroll={{ x: "1600px" }}
				dataSource={dataSource.map((item, key) => ({ ...item, key }))}
				pagination={{
					...pageOptions,
					onChange(current, pageSize) {
						setPageOptions({ pageSize, current });
						fetchGoods(current, pageSize);
					},
				}}
			/>
		</div>
	);
};

export default GoodsList;
